<template>
  <el-scrollbar class="a-card" ref="cardElement" :maxHeight="resize ? style.maxHeight + 'px' : 'auto'">
    <div class="a-card-container">
      <slot></slot>
    </div>
  </el-scrollbar>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'

defineOptions({
  name: 'a-card'
})

interface Props {
  resize?: boolean
}

const cardElement = ref<ScrollBarInstance | null>(null)

const style = ref({
  maxWidth: 0,
  maxHeight: 0
})

const props = withDefaults(defineProps<Props>(), {
  resize: false
})

function update() {
  const mainBox = document.getElementById('center-main')!
  const card = cardElement.value!.$el as HTMLElement
  style.value = {
    maxHeight: mainBox.offsetHeight - card.offsetTop,
    maxWidth: mainBox.offsetWidth - card.offsetLeft
  }
}

onMounted(() => {
  if (props.resize) {
    update()
    window.addEventListener('resize', update)
  }
})

onUnmounted(() => {
  window.removeEventListener('resize', update)
})
</script>

<style lang="scss">
.a-card {
  position: relative;
  width: 100%;
  background-color: #fff;
  border-radius: $border-radius;
  margin-bottom: $margin-large;
  &-container {
    height: 100%;
    padding: $padding-large;
    box-sizing: border-box;
  }
  .a-card {
    .a-card-container {
      padding: 0;
    }
  }
}
.a-card:last-child {
  margin-bottom: 0px;
}
</style>
